<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>
	<style>
		 ::-webkit-scrollbar-thumb {
		  background:#a2a2a2; 
		  border-radius: 10px;
		  height:50%;
		
		::-webkit-scrollbar{width:6px;}
			body{
				overflow-y: scroll;
			} 
	</style>
<script>
	$(document).ready(function() {
		$("#type").val($("#typeid").val());
		$("#orientation").val($("#orientationid").val());
		$("#bookJurisdiction").val($("#bookJurisdictionid").val());
		var lockid=$("#lockid").val();
		$(":radio[name='lock'][value='"+lockid+"']").attr("checked","checked"); 
		var wallid=$("#wallid").val();
		$(":radio[name='wall'][value='"+wallid+"']").attr("checked","checked");  
		
		var cont="";
		var equipment=$("#equipment").val();
		if(equipment.indexOf(1)!=-1){
			cont+='<option value="1" selected="selected">白板</option>';
		}else{
			cont+='<option value="1">白板</option>';
		}
		if(equipment.indexOf(2)!=-1){
			cont+='<option value="2" selected="selected">电视</option>';
		}else{
			cont+='<option value="2">电视</option>';
		}
		if(equipment.indexOf(3)!=-1){
			cont+='<option value="3" selected="selected">幻灯</option>';
		}else{
			cont+='<option value="3">幻灯</option>';
		}
		
		$("#equipments").html(cont);
		
		renderForm();
	});
	//重新渲染表单
	function renderForm(){
	    layui.use('form', function(){
	       var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
	       form.render();
	    });
	}
</script>
<style>
.layui-form-label{
	text-align:left
}
.kb-form-container{
	padding-left:20px;
}
.layui-form-item .layui-inline{
	margin-right:0px
}
#testName2{
	margin-top:20px;
}
#testName2>dl{
	margin-right: 15px;
    margin-bottom: 15px;
    display:inline-block;
}
#testName2 .layui-upload-img{
	width:100px;
	height:100px;
}
.img-del{
    position: absolute;
    text-align: center;
    line-height: 16px;
    display:none;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 1px solid #e6e6e6;
    background-color: #ffffff;
    cursor: pointer;
    font-weight:600;
}
#testName2>dl:hover .img-del{
	display:block
}
</style>
</head>
<body style="overflow-y:scroll">
<input type="hidden" id="typeid" name="typeid" th:value="${record.type}" />
<input type="hidden" id="lockid" name="lockid" th:value="${record.lock}" />
<input type="hidden" id="wallid" name="wallid" th:value="${record.wall}" />
<input type="hidden" id="orientationid" name="orientationid" th:value="${record.orientation}" />
<input type="hidden" id="bookJurisdictionid" name="bookJurisdictionid" th:value="${record.bookJurisdiction}" />
<div class="addemployee-wrap" id="employee-wrap">
	<div class="kb-form-container" >
		<form class="layui-form" id="defaultForm" th:action="@{/app/projectField/update}" th:method="post" lay-filter="employee-form">
			<input type="hidden" id="id" name="id" th:value="${record.id}" />
			<fieldset class="fieldset">
				<div class="layui-form-item">
				    <label class="layui-form-label"><span class="must-fill">*</span>名称</label>
				    <div class="layui-input-block">
				      	<input type="text" name="name" id="name" required th:value="${record.name}" lay-verify="name" placeholder="" autocomplete="off" class="layui-input">
				    </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label">类型</label>
				    <div class="layui-input-block">
				      	<select name="type" id="type" >
				      		<option value="1">会议室</option>
				      		<option value="2">休息区</option>
				      		<option value="3">咖啡店</option>
				      		<option value="4">健身房</option>
				      		<option value="5">活动区</option>
				      		<option value="6">演播室</option>
				      		<option value="7">摄影棚</option>
				      		<option value="8">游戏室</option>
				      		<option value="9">睡觉区</option>
				      		<option value="0">其他</option>
					    </select>
				    </div>
				</div>
				<div class="layui-form-item">
				    <div class="layui-inline">
					    <label class="layui-form-label"><span class="must-fill">*</span>容纳人数</label>
				        <div class="layui-input-inline" style="width: 200px;">
				            <input type="text" name="peopleNumber" id="peopleNumber" th:value="${record.peopleNumber}" lay-verify="peopleNumber" placeholder="" autocomplete="off" class="layui-input input-num">
				        </div>
				    </div>
				     <div class="layui-inline">
				        <label class="layui-form-label text-r" style="width: 80px;">面积</label>
				        <div class="layui-input-inline" style="width:200px;">
				            <input type="text" name="area" id="area" lay-verify="area" th:value="${record.area}" placeholder="" autocomplete="off" class="layui-input input-num">
				        </div>
				     </div>
				</div>
				<div class="layui-form-item">
				    <div class="layui-inline">
					    <label class="layui-form-label">锁</label>
				        <div class="layui-input-inline" style="width: 200px;">
				            <input name="lock" title="有" type="radio" value="1" />
			     	 		<input name="lock" title="无" type="radio" value="0" checked="checked"/>
				        </div>
				    </div>
				     <div class="layui-inline">
				        <label class="layui-form-label text-r" style="width: 80px;">墙</label>
				        <div class="layui-input-inline" style="width:200px;">
				            <input name="wall" title="有" type="radio" value="1" />
			     	 		<input name="wall" title="无" type="radio" value="0" checked="checked"/>
				        </div>
				     </div>
				</div>
				<div class="layui-form-item">
				    <div class="layui-inline">
					    <label class="layui-form-label">楼层</label>
				        <div class="layui-input-inline" style="width: 200px;">
				            <input type="text" name="floor" id="floor" th:value="${record.floor}" placeholder="" autocomplete="off" class="layui-input">
				        </div>
				    </div>
				     <div class="layui-inline">
				        <label class="layui-form-label text-r" style="width: 80px;">朝向</label>
				        <div class="layui-input-inline" style="width:200px;">
				            <select name="orientation" id="orientation" >
					      		<option value="东">东</option>
					      		<option value="西">西</option>
					      		<option value="南">南</option>
					      		<option value="北">北</option>
						    </select>
				        </div>
				     </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label">设备</label>
				    <div class="layui-input-block">
				      	<select name="equipments" id="equipments" lay-verify="equipments" xm-select="equipments" xm-select-skin="normal" xm-select-type="1">
					    </select>
					    <input type="hidden" id="equipment" name="equipment" th:value="${record.equipment}"/>
				    </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label">排序位</label>
				    <div class="layui-input-block">
				      	<input type="text" name="sort" id="sort" th:value="${record.sort}" lay-verify="area" placeholder="" autocomplete="off" class="layui-input">
				      	<span style="color: rgb(153, 153, 153); font-size: 12px; padding: 4px 0px 0px;">请输入数字，修改客户端的会议室位置，数字越大排上面</span>
				    </div>
				</div>
				<div class="layui-form-item">
				    <div class="layui-inline">
					    <label class="layui-form-label">预订权限</label>
				        <div class="layui-input-inline" style="width: 200px;">
				            <select name="bookJurisdiction" id="bookJurisdiction" >
					      		<option value="1">所有会员可以预定</option>
					      		<option value="2">只有分店管理人员可以预定</option>
						    </select>
				        </div>
				    </div>
				     <div class="layui-inline">
				        <label class="layui-form-label text-r" style="width: 130px;">最大同时预订数</label>
				        <div class="layui-input-inline" style="width:150px;">
				            <input type="text" name="bookNumber" id="bookNumber" th:value="${record.bookNumber}" lay-verify="area" placeholder="" autocomplete="off" class="layui-input">
				        </div>
				     </div>
				</div>
				<div class="layui-form-item">
				    <div class="layui-inline">
					    <label class="layui-form-label">价格</label>
				        <div class="layui-input-inline" style="width: 200px;">
				            <input type="text" name="checkPrice" id="checkPrice" th:value="${record.checkPrice}" lay-verify="area" placeholder="" autocomplete="off" class="layui-input input-num">
				        </div>
				    </div>
				     <div class="layui-inline">
				        <label class="layui-form-label text-r" style="width: 130px;">非入住价格</label>
				        <div class="layui-input-inline" style="width:150px;">
				            <input type="text" name="wrongCheckPrice" id="wrongCheckPrice" th:value="${record.wrongCheckPrice}" placeholder="" autocomplete="off" class="layui-input input-num">
				        </div>
				     </div>
				</div>
				<div class="layui-form-item">
				    <label class="layui-form-label">上传图片</label>
				    <div class="layui-input-block">
				      	<button type="button" class="layui-btn layui-btn-normal" id="test2">上传场地照片</button>
				      	<br>
				      	<span style="color: rgb(153, 153, 153); font-size: 12px; padding: 4px 0px 0px;">允许多张上传,格式为png或jpg,大小不大于20M</span>
				    	<div id="testName2" class="">
				   		<dl th:id="${sys.id}" th:each="sys : ${sysa}" >
			    			<dt style="position: relative;">
			    				<img th:src="|${sys.filePath}${sys.id}${sys.fileType}|" class="layui-upload-img">
			    				<div class="img-mask"></div>
			    				<span class="img-del" th:id="${sys.id}" onclick="delt(this)"><i class="glyphicon glyphicon-trash">×</i></span>	
			    			</dt>
			    			<dd style="padding-right:10px;line-height:16px">
			    				<input type="hidden" id="fileId" name="fileId" th:value="${sys.id}" />
					    		
			    			</dd>
				    	</dl>
				   		</div>
				    </div>
				</div>
			</fieldset>
			<fieldset class="fieldset">	
				<div class="layui-form-item" style="">
				    <div class="layui-input-block">
				      <button class="layui-btn layui-btn-normal btn-bg" lay-submit lay-filter="formEmployee" id="submit-btn">提交</button>
				      <a class="layui-btn layui-btn-primary" onclick="closeLayer()">取消</a>
				    </div>
				</div>
			</fieldset>
		</form>	
	</div>
</div>
</body>
<script>
$(function(){
	layui.config({
	        base: '/js/plugin/layui-v2.3.0/layui/' //此处路径请自行处理, 可以使用绝对路径
	    }).extend({
	        formSelects: 'formSelects-v3'
	    }).use(['element',"layer","form",'formSelects','upload'], function(){
			var layer=layui.layer,form = layui.form,formSelects = layui.formSelects,upload = layui.upload;
			//上传
			layui.use('upload', function(){
				var $ = layui.jquery
				,upload = layui.upload;
			});
			
			getUpload("test2","testName2","/common/upload/add/",$("#id").val());
			
			form.verify({
				name: function(value, item){ //value：表单的值、item：表单的DOM对象
		      	  if(value==""){
			       	  return '名称不能为空';
			      }
			  }
				,peopleNumber: function(value, item){ //value：表单的值、item：表单的DOM对象
		      	    if(value==""){
			       	    return '容纳人数不能为空';
			        }
			  }
				,equipments: function(value, item){ //value：表单的值、item：表单的DOM对象
					var con="";
					for(var i=0;i<formSelects.value('equipments').length;i++){
					 con+=","+formSelects.value('equipments')[i].val;
					}
					$("#equipment").val(con.substring(1));
			  }
			  
			}); 
			//监听提交
			  form.on('submit(formEmployee)', function(data){
				  $.post($("#defaultForm").attr('action'), data.field, function(result) {
						window.parent.layer.msg(result.msg);
						closeLayer();
					}, 'json');
					return false;
			  });
			
		});
})
</script>
</html>